<template>
	<view class="my_store">
		<view class="header_line" :class="{ active: showHeadLine }"></view>

		<view v-if="showBackTop" class="backTop" @click="toScrollTop">
			<uni-icons color="#ffffff" size="34" type="up" />
		</view>

		<scroll-view class="my_store_wrap" scroll-y :scroll-top="scrollTop" @scroll="handleScroll">
			<view class="header">
				<view class="nav_bar">
					<uni-icons color="black" size="28" type="left" />
					<view v-if="!isOwner" class="follow" :class="{ un: follow }" @click="follow = !follow">{{ follow ? "已关注" : "关注" }}</view>
				</view>

				<view class="user_info">
					<image class="avatar" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix" />

					<view class="user_info_detail">
						<view class="name shadow" :data-content="name">{{ name }}</view>
						<view class="fans">
							<view class="shadow" :data-content="fans">{{ fans }}</view>
							<view class="shadow" :data-content="followers">{{ followers }}</view>
						</view>
					</view>
				</view>
			</view>

			<view class="main">
				<view class="tabs">
					<view
						class="tabs_item_title"
						v-for="(item, index) in orderTypes"
						:key="index"
						@click="
							orderType = item.value;
							orderStatus = 0;
						"
					>
						{{ item.label }}
						<view class="line" :class="{ active: item.value === orderType }"></view>
					</view>
				</view>

				<view class="filter">
					<view class="search">
						<uni-search-bar
							v-model="selection.search"
							placeholder="藏品搜索"
							cancelButton="none"
							bgColor="#EEEEEE"
							textColor="black"
							:radius="20"
							@clear="clearSearch"
							@confirm="search"
						>
							<template v-slot:searchIcon>
								<uni-icons color="#999999" size="18" type="search" />
							</template>
						</uni-search-bar>
					</view>

					<view class="sort">
						<view class="item" @click="changeSort('price')">
							价格
							<view class="triangle" :class="{ desc: !selection.price }"></view>
						</view>
						<view class="item" @click="changeSort('time')">
							时间
							<view class="triangle" :class="{ desc: !selection.time }"></view>
						</view>
					</view>
				</view>

				<view class="nft_list">
					<view class="nft_item" v-for="(item, index) in 10" :key="index" @click.stop="toNft">
						<image class="nft_item_img" src="http://qiniu.relaverse.cn/icon/nft_placeholder.png" mode="widthFix" />
						<view class="nft_item_info">
							<view class="name">藏品名称</view>
							<view class="price"><text class="unit">¥</text>999999</view>

							<view v-if="orderType === 1 && !isOwner" class="buy" @click.stop="toBuy">购买</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>
<script>
export default {
	data() {
		return {
			showHeadLine: false,
			showBackTop: false,
			follow: false,
			name: "用户昵称用户昵称用户昵称用户昵称",
			fans: "XXX 粉丝",
			followers: "XXX 关注",
			orderType: 1,
			orderTypes: [
				{
					label: "寄售中",
					value: 1,
				},
				{
					label: "未寄售",
					value: 2,
				},
			],

			selection: {
				search: "",
				price: true,
				time: true,
			},

			runScrollTop: 0,
			scrollTop: 0,
			scrollTopTimer: null,

			isOwner: true,
		};
	},

	methods: {
		changeSort(type) {
			this.selection[type] = !this.selection[type];
		},

		clearSearch() {
			this.selection.search = "";

			this.search();
		},

		search() {
			// todo
		},

		toNft() {
			uni.navigateTo({
				url: "/pages/market/nft",
			});
		},

		toBuy() {
			console.log("toBuy");
		},
		handleScroll(event) {
			this.showHeadLine = event.detail.scrollTop > 100;
			this.showBackTop = event.detail.scrollTop > 200;
			this.runScrollTop = event.detail.scrollTop;

			if (this.scrollTopTimer) {
				clearTimeout(this.scrollTopTimer);
				this.scrollTopTimer = null;
			}

			this.scrollTopTimer = setTimeout(() => {
				this.scrollTop = this.runScrollTop;
			}, 500);
		},

		toScrollTop() {
			if (this.scrollTopTimer) {
				clearTimeout(this.scrollTopTimer);
				this.scrollTopTimer = null;
			}
			this.scrollTop = this.runScrollTop;
			this.$nextTick(() => ((this.scrollTop = 0), (this.runScrollTop = 0)));
		},
	},
};
</script>
<style lang="scss" scoped>
.my_store {
	width: 100vw;
	height: 100vh;

	background-image: url("http://qiniu.relaverse.cn/icon/nft_placeholder.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0 -30%;

	.header_line {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: var(--status-bar-height);
		background-color: transparent;
		z-index: 2;
		transition: background-color 0.5s ease;

		&.active {
			background-color: #ffffff;
		}
	}

	.backTop {
		position: absolute;
		bottom: 40rpx;
		right: 40rpx;
		width: 100rpx;
		height: 100rpx;
		background-color: #2359f8;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 2;
	}

	.my_store_wrap {
		width: 100%;
		height: 100%;
		backdrop-filter: blur(15rpx);
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 50%, white 60%, white 100%);
	}

	.header {
		width: 100%;
		height: 444rpx;
		padding-top: calc(var(--status-bar-height) * 2);
		.nav_bar {
			width: 100%;
			height: 88rpx;
			padding: 0 40rpx;

			display: flex;
			justify-content: space-between;
			align-items: center;

			.follow {
				width: 132rpx;
				height: 60rpx;
				background-color: #1952f8;
				color: white;
				border-radius: 20rpx;
				border: 2rpx solid #1952f8;

				font-weight: 500;
				font-size: 28rpx;
				line-height: 60rpx;
				text-align: center;

				&.un {
					background-color: rgba($color: #1952f8, $alpha: 0.5);
				}
			}
		}

		.user_info {
			width: 100%;
			height: max-content;
			margin-top: 60rpx;
			padding: 0 40rpx;

			height: 160rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			.avatar {
				width: 160rpx;
				border-radius: 50%;
			}

			.user_info_detail {
				width: 60%;
				height: 100%;
				margin-left: 40rpx;

				color: white;

				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: flex-start;

				.name {
					width: 100%;
					font-weight: bolder;
					font-size: 44rpx;

					overflow: hidden; /* 隐藏超出部分 */
					white-space: nowrap; /* 不换行 */
					text-overflow: ellipsis; /* 省略号 */
				}

				.fans {
					width: 100%;
					font-weight: bolder;
					font-size: 28rpx;
					display: flex;
					justify-content: flex-start;
					align-items: center;

					view {
						flex: 1;
					}
				}

				.shadow {
					position: relative;
					&::after {
						content: attr(data-content);
						color: rgba(0, 0, 0, 0.4);
						position: absolute;
						left: 3rpx;
						top: 3rpx;
						font-weight: bold;
						z-index: -1;
						width: 100%;
						height: 100%;

						white-space: nowrap; /* 不换行 */
						overflow: hidden; /* 隐藏溢出内容 */
						text-overflow: ellipsis; /* 省略号 */
					}
				}
			}
		}
	}

	.main {
		width: 100%;
		height: max-content;
		min-height: calc(100% - 444rpx);
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;

		padding: 40rpx;

		.tabs {
			width: 100%;
			height: 60rpx;

			display: flex;
			justify-content: space-around;
			align-items: center;

			.tabs_item_title {
				font-weight: bolder;
				font-size: 36rpx;
				color: black;

				text-align: center;

				.line {
					width: 40rpx;
					height: 8rpx;
					border-radius: 4rpx;
					background-color: transparent;
					margin: 0 auto;
					&.active {
						background-color: #2359f8;
					}
				}
			}
		}

		.filter {
			height: 64rpx;
			width: 100%;

			display: flex;
			justify-content: flex-start;
			align-items: center;

			margin-top: 28rpx;

			.search {
				width: calc(247 * 100% / 390);
				height: 64rpx;

				.uni-searchbar {
					padding: 0;

					::v-deep .uni-searchbar__text-placeholder {
						color: #999999;
					}
				}
			}

			.sort {
				width: calc(100% - (247 * 100% / 390));
				height: 34rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				.item {
					height: 100%;
					width: 68rpx;

					font-size: 24rpx;
					color: #1952f8;
					font-weight: bold;

					display: flex;
					justify-content: center;
					align-items: center;

					& + .item {
						margin-left: 30rpx;
					}

					.triangle {
						width: 13rpx;
						height: 80%;
						margin-left: 6rpx;
						position: relative;

						&::before {
							content: "";
							position: absolute;
							top: 0;
							left: 0;
							border-left: 10rpx solid transparent; /* 左边框 */
							border-right: 10rpx solid transparent; /* 右边框 */
							border-bottom: 12rpx solid #1952f8; /* 上三角形的底边框，颜色为蓝色 */
							transform: scale(0.8);
						}

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							left: 0;
							border-left: 10rpx solid transparent; /* 左边框 */
							border-right: 10rpx solid transparent; /* 右边框 */
							border-top: 12rpx solid #cccccc;
							transform: scale(0.8);
						}

						&.desc {
							&::before {
								border-bottom: 12rpx solid #cccccc; /* 上三角形的底边框，颜色为蓝色 */
							}

							&::after {
								border-top: 12rpx solid #1952f8;
							}
						}
					}
				}
			}
		}

		.nft_list {
			width: 100%;
			height: max-content;
			margin-top: 30rpx;

			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: wrap;

			.nft_item {
				width: 48%;
				height: 464rpx;
				margin-bottom: 30rpx;

				.nft_item_img {
					width: 100%;
					border-radius: 30rpx;
				}

				&:nth-child(2n) {
					margin-left: auto;
				}

				.nft_item_info {
					width: 100%;
					color: black;
					margin-top: 15rpx;
					position: relative;

					.name {
						font-weight: 500;
						font-size: 32rpx;
					}

					.price {
						font-weight: 600;
						font-size: 40rpx;

						.unit {
							font-size: 28rpx;
							padding-right: 5rpx;
						}
					}

					.buy {
						width: 96rpx;
						height: 52rpx;
						position: absolute;
						top: 50%;
						right: 0;
						transform: translateY(-50%);
						background-color: #2359f8;
						color: white;
						font-weight: bolder;
						font-size: 20rpx;
						text-align: center;
						line-height: 52rpx;
						border-radius: 10rpx;
					}
				}
			}
		}
	}
}
</style>
